<template>
  <div>
    <div class="card card-custom gutter-b example example-compact" id="tableBody">
      <div class="card-header">
        <div class="card-title">
          <span class="card-icon">
            <i class="text-dark-50 flaticon-search-magnifier-interface-symbol"></i>
          </span>
          <h3 class="card-label"> 查询区域 </h3>
        </div>
        <div class="card-toolbar">
          <div class="example-tools justify-content-center">
            <!-- 
                <span data-toggle="tooltip" class="example-toggle"></span>
                <span data-toggle="tooltip" class="example-copy"></span> 
              -->
          </div>
        </div>
      </div>
      <div class="card-body">
        <!--查询条件-->
        <div class="m-form m-form--fit m-form--label-align-left m-form--group-seperator-dashed">
          <div class="m-portlet__body">
            <div class="form-group m-form__group row">
              <label class="col-form-label">名称:</label>
              <div class="col-md-2">
                <input type="text" class="form-control" v-model="searchForm.name" placeholder="请输入">
              </div>
              <label class="col-form-label">状态：</label>
              <div class="col-lg-2">
                <el-select v-model="searchForm.status" style="width: 120px;">
                  <el-option v-for="item in [{ value: '', label: '请选择' }, { value: 0, label: '关闭' }, { value: 1, label: '发布' }]"
                    :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </div>
              <b-button :pressed="false" variant="btn btn-primary font-weight-bold mr-2" @click="search()"><span><i
                    class="fa fa-search"></i><span>查询</span></span></b-button>
              <b-button :pressed="false" variant="btn btn-light font-weight-bold mr-2" @click="resetAll()">
                <span><span>清空条件</span></span></b-button>
            </div>
          </div>
          <div class="m-portlet__foot m-portlet__no-border m-portlet__foot--fit">
            <div class="m-form__actions m-form__actions--solid">
              <div class="row">
                <div class="col m--align-left">
                  <button class="btn btn-light-success font-weight-bold mr-2 " @click="addGraphSite">
                    <span><i class="la la-plus la-lg"></i><span>新 增</span></span>
                  </button>

                  <button class="btn btn-light-primary font-weight-bold mr-2" @click="updateGraphSite"
                    :disabled="this.sels.length != 1">
                    <span><i class="la la-pen-alt"></i><span>编 辑</span></span>
                  </button>
                  <!-- :disabled="this.sels.length === 0" 如果没有数据让删除按钮失效 -->
                  <button class="btn btn-light-danger font-weight-bold mr-2" @click="delGraphSite"
                    :disabled="this.sels.length === 0">
                    <span><i class="far fa-trash-alt"></i><span>删 除</span></span>
                  </button>
                </div>
                <div class="col m--align-right">

                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--分页组件-->
      <el-table style="width: 100%" stripe border @selection-change="handleSelectionChange" highlight-current-row
        :data="GraphSiteList">
        <!-- 复选框 -->
        <el-table-column type="selection" width="40"></el-table-column>
        <el-table-column label="序号" min-width="50">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column align="left" prop="name" show-overflow-tooltip label="名称"></el-table-column>
        <el-table-column align="left" prop="status" show-overflow-tooltip label="状态">
          <template slot-scope="scope">
            <div v-if="scope.row.status == 0" class="symbol symbol-50 symbol-circle symbol-light-danger">
              <span class="symbol-label font-size-h8">关闭</span>
            </div>
            <div v-else-if="scope.row.status == 1" class="symbol symbol-50 symbol-circle symbol-light-success">
              <span class="symbol-label font-size-h8">已发布</span>
            </div>
            <div v-else class="symbol symbol-50 symbol-circle symbol-light-warning">
              <span class="symbol-label font-size-h8">未知</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="createBy" label="创建人" min-width="150"></el-table-column>
        <el-table-column align="center" prop="createTime" label="创建时间" min-width="180"></el-table-column>
        <el-table-column align="center" prop="modifiedBy" label="修改人" min-width="150"></el-table-column>
        <el-table-column align="center" prop="updateTime" label="修改时间" min-width="180"></el-table-column>
        <el-table-column align="left" prop="showGrid" show-overflow-tooltip label="显示网格">
          <template slot-scope="scope">
            <div v-if="scope.row.showGrid == 0" class="symbol symbol-40 symbol-circle symbol-light-danger">
              <span class="symbol-label font-size-h8">是</span>
            </div>
            <div v-else-if="scope.row.showGrid == 1" class="symbol symbol-40 symbol-circle symbol-light-success">
              <span class="symbol-label font-size-h8">否</span>
            </div>
            <div v-else class="symbol symbol-40 symbol-circle symbol-light-warning">
              <span class="symbol-label font-size-h8">未知</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" fixed="right" min-width="180">
          <template slot-scope="scope">
            <!--scope.row当前行的对象-->
            <a href="javascript:;" @click="toGraphDesign(scope.row)" class="btn btn-sm btn-clean btn-icon" title="在线设计">
              <span class="svg-icon svg-icon-primary svg-icon-2x">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px"
                  height="24px" viewBox="0 0 24 24" version="1.1">
                  <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <rect x="0" y="0" width="24" height="24" />
                    <path d="M6,9 L6,15 L10,15 L10,9 L6,9 Z M6.25,7 L19.75,7 C20.9926407,7 22,7.81402773 22,
                          8.81818182 L22,15.1818182 C22,16.1859723 20.9926407,17 19.75,17 L6.25,17 C5.00735931,17 4,
                          16.1859723 4,15.1818182 L4,8.81818182 C4,7.81402773 5.00735931,7 6.25,7 Z" fill="#000000"
                      fill-rule="nonzero"
                      transform="translate(13.000000, 12.000000) rotate(-45.000000) translate(-13.000000, -12.000000) " />
                  </g>
                </svg>
              </span>
            </a>

            <a href="javascript:;" @click="toGraphPreview(scope.row)" class="btn btn-sm btn-clean btn-icon" title="预览">
              <span class="svg-icon svg-icon-primary svg-icon-2x">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px"
                  height="24px" viewBox="0 0 24 24" version="1.1">
                  <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <rect x="0" y="0" width="24" height="24" />
                    <path d="M5,5 L5,15 C5,15.5948613 5.25970314,16.1290656 5.6719139,16.4954176 C5.71978107,
                          16.5379595 5.76682388,16.5788906 5.81365532,16.6178662 C5.82524933,16.6294602 15,7.45470952 15,
                          7.45470952 C15,6.9962515 15,6.17801499 15,5 L5,5 Z M5,3 L15,3 C16.1045695,3 17,3.8954305 17,
                          5 L17,15 C17,17.209139 15.209139,19 13,19 L7,19 C4.790861,19 3,17.209139 3,15 L3,5 C3,
                          3.8954305 3.8954305,3 5,3 Z" fill="#000000" fill-rule="nonzero"
                      transform="translate(10.000000, 11.000000) rotate(-315.000000) translate(-10.000000, -11.000000) " />
                    <path d="M20,22 C21.6568542,22 23,20.6568542 23,19 C23,17.8954305 22,16.2287638 20,14 C18,
                          16.2287638 17,17.8954305 17,19 C17,20.6568542 18.3431458,22 20,22 Z" fill="#000000"
                      opacity="0.3" />
                  </g>
                </svg>
              </span>
            </a>

            <a href="javascript:;" @click="getGraphSiteDetail(scope.row)" class="btn btn-sm btn-clean btn-icon"
              title="详情">
              <span class="svg-icon svg-icon-primary svg-icon-2x">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px"
                  height="24px" viewBox="0 0 24 24" version="1.1">
                  <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <rect x="0" y="0" width="24" height="24" />
                    <path
                      d="M19.2078777,9.84836149 C20.3303823,11.0178941 21,12 21,12 C21,12 16.9090909,18 12,18 C11.6893441,18 11.3879033,17.9864845 11.0955026,17.9607365 L19.2078777,9.84836149 Z"
                      fill="#000000" fill-rule="nonzero" />
                    <path
                      d="M14.5051465,6.49485351 L12,9 C10.3431458,9 9,10.3431458 9,12 L5.52661464,15.4733854 C3.75006453,13.8334911 3,
                                      12 3,12 C3,12 5.45454545,6 12,6 C12.8665422,6 13.7075911,6.18695134 14.5051465,6.49485351 Z"
                      fill="#000000" fill-rule="nonzero" />
                    <rect fill="#000000" opacity="0.3"
                      transform="translate(12.524621, 12.424621) rotate(-45.000000) translate(-12.524621, -12.424621) "
                      x="3.02462111" y="11.4246212" width="19" height="2" />
                  </g>
                </svg>
              </span>
            </a>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination hide-on-single-page @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="pageNo" :page-sizes="[5, 10, 30, 50]" :page-size="pageSize"
          layout="->,total, sizes, prev, pager, next, jumper" :total="totalCount">
        </el-pagination>
      </div>
    </div>
    <GraphSiteAdd ref="GraphSiteAddRef" @change="search"></GraphSiteAdd><!--采用父窗口关闭传递的方法-->
    <GraphSiteUpdate ref="GraphSiteUpdateRef" @change="search"></GraphSiteUpdate><!--采用父窗口关闭传递的方法-->
    <GraphSiteDetail ref="GraphSiteDetailRef"></GraphSiteDetail>
    <GraphDesign ref="GraphDesignRef"></GraphDesign>
    <GraphPreview ref="GraphPreviewRef"></GraphPreview>
  </div>
</template>
  
<script>
import { SET_BREADCRUMB } from "@/store/breadcrumbs.module";
import GraphSiteAdd from "@/view/monitor/graph-site/graph-site-add.vue";
import GraphSiteUpdate from "@/view/monitor/graph-site/graph-site-update.vue";
import GraphSiteDetail from "@/view/monitor/graph-site/graph-site-detail.vue";
import GraphDesign from "@/view/monitor/graph-design/graph-design-list.vue";
import GraphPreview from "@/view/monitor/graph-site/graph-preview-win.vue";
import Swal from "sweetalert2";
import apiUtil from "@/core/util/apiUtil.js";
import { handleNotify, handleAlert, handleConfirm, showWating, closeWating } from "@/core/util/jehcUtil.js";
export default {
  data() {
    return {
      searchForm: { name: "", status: "" },
      GraphSiteList: [],
      sels: [], //当前选框选中的值
      pageNo: 1,      // 默认当前是第一页
      pageSize: 5,    // 当前每页的数据是5条
      totalCount: 0   // 总数默认为0
    }
  },
  components: {
    GraphSiteAdd,
    GraphSiteUpdate,
    GraphSiteDetail,
    GraphPreview,
    GraphDesign
  },
  mounted() {
    this.$store.dispatch(SET_BREADCRUMB, [{ title: "站点维护" }]);
    this.initList();   // 按当前的页号和每页的数据量进行查询
  },
  methods: {
    initList() {
      showWating({ renderBody: "tableBody" });
      var params = {};
      params.usePageNo = true;//采用第几页进行分页（兼容）
      params.pageSize = this.pageSize;//页面显示记录条数，在页面显示每页显示多少项的时候
      params.pageNo = this.pageNo;//开始的记录序号   
      params.searchJson = JSON.stringify(this.searchForm);//为form元素     
      apiUtil.queryPage(process.env.VUE_APP_MONITOR_API + "/graphSite/list", params).then(({ data }) => {
        this.GraphSiteList = data.data;//给结果集赋值
        this.totalCount = data.total;// 获取当前数据的总数    
      });
    },

    handleSelectionChange(sels) {//获取选中的值
      this.sels = sels;
      console.log("选中的值", sels.map((item) => item.id));
    },
    addGraphSite() {//新建
      this.$refs.GraphSiteAddRef.showModal()
    },
    updateGraphSite() {// 更新
      if (this.sels.length != 1) {
        handleAlert("请选择一条数据", "warning", 3)
        return;
      }
      let id = this.sels.map((item) => item.id);
      this.$refs.GraphSiteUpdateRef.showModal(id);
    },
    delGraphSite() { // 删除
      if (this.sels.length === 0) {
        handleAlert("请选择删除的数据", "warning", 3)
        return;
      }
      // 删除前提示
      this.$confirm("确认删除记录吗?", "提示", { type: "warning", }).then(() => {
        let ids = this.sels.map((item) => item.id);
        // 根据后台想要的参数格式选择
        // console.log(ids.join(",")); //1,2,3,4
        // console.log(ids); //[1,2,3,4]
        apiUtil.delete(process.env.VUE_APP_MONITOR_API + "/graphSite/delete?id=" + ids.join(",")).then(data => {
          if (data.data.success) {
            handleAlert("删除成功", "success", 3);
            this.search();
          } else {
            handleAlert("删除失败", "error", 3);
          }
        });
      }).catch(() => { });//注意这里，这里是重点！！！;        
    },
    handleSizeChange(val) { // 修改每页所存数据量的值所触发的函数
      this.pageSize = val;  // 修改页的大小
      this.initList();       // 按新的pageNo和pageSize进行查询
    },
    handleCurrentChange(val) { // 修改当前页所触发的函数
      this.pageNo = val;       // 更新当前的页
      this.initList();          // 按新的pageNo和pageSize进行查询
    },
    search() {
      this.pageNo = 1;       // 更新当前的页
      this.initList();          // 按新的pageNo和pageSize进行查询
    },
    resetAll() {
      Object.assign(this.$data.searchForm, this.$options.data().searchForm);
      this.search();
    },
    getGraphSiteDetail(row) {
      this.$refs.GraphSiteDetailRef.showModal(row.id);
    },
    toGraphDesign(row) {
      this.$refs.GraphDesignRef.showModal(row);
    },
    toGraphPreview(row) {
      this.$refs.GraphPreviewRef.showModal(row);
    },
  }
};
</script>